<template>
  <div id="home">
    <div class="demo-image__placeholder">
      <div class="block">
        <el-image :src="src">
          <div slot="placeholder" class="image-slot" lazy fit = "fill">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      title: "农产品监控系统",
      src: "https://images.pexels.com/photos/237635/pexels-photo-237635.jpeg?auto=compress",
    };
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.5;
  line-height: 100px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #6fdd58;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #6fdd58;
}
</style>